import React, { Component } from 'react'
import Marked from 'marked'
import './index.scss'
import hljs from 'highlight.js'

interface StateInterface {

}

interface PropsInterface {
  markedStr: string
}

class MarkedParsing extends Component<PropsInterface, StateInterface> {

  componentWillMount() {
    this.initMarked()
  }

  initMarked() {
    const rendererMD = new Marked.Renderer()
      Marked.setOptions({
        renderer: rendererMD,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
      })
      Marked.setOptions({
        highlight: function(code) {
          return hljs.highlightAuto(code).value
        }
      })
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    const data = Marked(this.props.markedStr);
    return <div className={'w-markdown-parsing'} dangerouslySetInnerHTML={ { __html: data } }></div>
  }
}

export default MarkedParsing